<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-height, user-scalable=no">
    <link href='./styles.css' rel='stylesheet' type='text/css'>
    <link href="http://fonts.googleapis.com/css?family=Andika&subset=latin" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="./lib/add2home.css">
    <script type="application/javascript" src="./lib/add2home.js"></script>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="revo gallery">
    <title>revolunet Flickr Gallery</title>

    <link rel="shortcut icon" href="./img/favicon.ico">
    <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="57x57" href="./img/apple-touch-icon-57x57-precomposed.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="./img/apple-touch-icon-72x72-precomposed.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="./img/apple-touch-icon-114x114-precomposed.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="./img/apple-touch-icon-144x144-precomposed.png" />

  </head>
  <body ng-app="myApp" ng-controller='demoController'>

    <div style="display:none">
      <div id="lazySpinner">
        <div class="loading" ng-show="loading">
          <span class="ouro">
            <span class="left"><span class="anim"></span></span>
            <span class="right"><span class="anim"></span></span>
          </span>
        </div>
      </div>
    </div>

    <div class="ng-cloak enable_touchmove" snap-shelves="">
      <div id="shelf-1" snap-shelf="">
        <ul class="list ">
            <li class="close"> <span ng-click="snapper.close()" aria-hidden="true" class="icon-cancel"></span></li>
            <li class="list-divider">Real Estate</li>
              <li ng-click="loadGroup('769144@N20');snapper.close()">Loft design</li>
              <li ng-click="loadGroup('761508@N22');snapper.close()">Interior design</li>
              <li ng-click="loadGroup('22742156@N00');snapper.close()">Appartments</li>
              <li ng-click="loadGroup('94416862@N00');snapper.close()">World living rooms</li>
            <li class="list-divider">Holidays</li>
              <li ng-click="loadGroup('1580643@N23');snapper.close()">Holidays rentals</li>
              <li ng-click="loadGroup('1226795@N24');snapper.close()">Bali rentals</li>
              <li ng-click="loadGroup('1033028@N20');snapper.close()">Etapes de France</li>
              <li ng-click="loadGroup('342712@N20');snapper.close()">British Castles</li>
            <li class="list-divider">Photography</li>
              <li ng-click="loadGroup('1768467@N20');snapper.close()">Street portraits</li>
              <li ng-click="loadGroup('99275357@N00');snapper.close()">HDR only</li>
              <li ng-click="loadGroup('722908@N23');snapper.close()">Animals</li>
           <!--  <li class="list-divider">PHOTOGRAPHY</li>
              <li ng-click="load('fashion fine art black white photography');snapper.close()">Fashion</li>
              <li ng-click="load('portrait black white fine arts photography');snapper.close()">Portrait</li>
              <li ng-click="load('black white architecture arts photography');snapper.close()">Architecture</li>
              <li ng-click="load('black white fine art photography');snapper.close()">Fine Arts</li>
            <li class="list-divider">GRAPHIC DESIGN</li>
              <li ng-click="load('illustration design');snapper.close()">Illustration</li>
              <li ng-click="load('typography lettering design');snapper.close()">Typography</li>
              <li ng-click="load('poster design');snapper.close()">Posters</li> -->
        </ul>
      </div>
    </div>

    <div id="content" snap-content="" class="enable_touchmove" snap-options='{ "maxPosition": 200, "touchToDrag": false }'>
      <header class="bar-title">
        <a class="button nav" href='#' ng-click="snapper.toggle('left')">
          <span aria-hidden="true" class="icon-menu"></span>
        </a>
        <h1 class="title">Gallery web application</h1>
        <a class="button info" href="#" ng-click="aboutModal.open(true);" style='width:30px;text-align:center'>
          <span aria-hidden="true" class="icon-info-sign"></span>
        </a>
      </header>

      <div class="loading" ng-show="loading">
          <span class="ouro">
            <span class="left"><span class="anim"></span></span>
            <span class="right"><span class="anim"></span></span>
          </span>
      </div>

      <ul rn-carousel rn-carousel-buffered class="page-container" ng-class="{blurred: blurred}">
        <li ng-repeat="page in pages">
          <div class="page {{ page.tpl }}">
            <div ng-repeat="item in page.images" ng-click="toggle(item)" ng-class="item.cls">
              <div class="img loading" lazy-loading-class="loading" lazy-loaded-class="loaded" lazy-background="item.image + '.jpg'">
                <div class="caption">{{ item.title|words:10 }}</div>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <div id="modal" ng-show="previewModal.visible" class="ng-cloak" ng-class="previewModal.cls" ng-click="previewModal.close()" lazy-loader="#lazySpinner" lazy-background="current.image + '_b.jpg'"></div>

      <div id="infos" ng-show="aboutModal.visible" class="ng-cloak" ng-click="aboutModal.close()" ng-class="aboutModal.cls">
        <h2>Created by :</h2>
        <img src="./img/revolunetcom.png" alt="" title="" width="162" height="196">
        <a href="mailto:contact@revolunet.com" target="_blank" class="git">contact@revolunet.com</a>
        <a class="git" target="_blank" href="https://github.com/revolunet/angular-carousel">Github Project</a>
      </div>

    </div>

    <script src="//code.angularjs.org/1.2.7/angular.js"></script>
    <script src="//code.angularjs.org/1.2.7/angular-touch.js"></script>
    <script src="./lib/angular-snap.min.js"></script>
    <script src="./lib/truncate.js"></script>
    <script src="./lib/snap.js"></script>
    <script src="./lib/lazy.js"></script>

    <script src="../../dist/angular-carousel.js"></script>

    <script src="./app.js"></script>

  </body>
</html>

